<template>
  <div class="app-container">
    <el-form :model="query" label-width="80px" :inline="true" size="small">
      <el-form-item label="类型">
        <el-select v-model="query.type" >
          <el-option v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        
      </el-form-item>
      <el-form-item label="开始时间">
         <el-date-picker v-model="query.begin" type="date" placeholder="选择开始时间" value-format="yyyy-MM-dd" @change="chooseBeginDate">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
         <el-date-picker v-model="query.end" type="date" placeholder="选择结束时间" value-format="yyyy-MM-dd" @change="chooseEndDate">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="width:100%;height:500px" ref="myChartRef"></div>
  </div>
</template>

<script>
import staApi from "@/api/sta";
export default {
  data() {
    return {
      typeOptions:[
        {
          label:"注册人数",
          value:"register_num"
        },
        {
          label:"登录人数",
          value:"login_num"
        },
        {
          label:"每日播放视频数",
          value:"video_view_num"
        },
        {
          label:"每日新增课程数",
          value:"course_num"
        }
      ],
      myChart:null,
      option: {
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
          },
        ],
      },
      query:{
        type:null,
        begin:null,
        end:null
      }
    };
  },
 
  mounted () {
    this.InitChart();
  },
  methods: {
    InitChart() {
       this.myChart = this.$echarts.init(this.$refs.myChartRef)
       this.myChart.setOption(this.option)
    },

    async handleQuery() {
      let res = await staApi.showData(this.query);
      if(res.success) {
        this.option.xAxis.data = res.data.dateList
        this.option.series[0].data = res.data.numList
        this.InitChart()
      }
    },
    chooseBeginDate(date){
      this.query.begin = date
    },
    chooseEndDate(date){
      this.query.end = date
    }
  },
};
</script>

<style lang="scss" scoped>
</style>